import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
} from 'react-native';

import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import BaseComponent from './BaseComponent';

const DEFAUL_SIZE = 45;
const MAX_SHOW_NUM = 9;

export default class CommonAvatarView extends BaseComponent {
  constructor(props) {
    super(props);

    // console.log("====" + this.props.avatarUri + "====");
    this._size = this.props.size === undefined ? DEFAUL_SIZE : this.props.size;
    this._setAvatarUri(this.props);
  }

  componentWillUpdate(nextProps, nextState) {
    this._setAvatarUri(nextProps);
  }

  _setAvatarUri(props) {
    if(props.avatarUri === undefined || props.avatarUri === null || props.avatarUri === "") {
      this._avatarUri = require("../../../resource/images/common/avatar.png");
    }
    //字符串
    else if (typeof props.avatarUri == "string"){
      this._avatarUri = {uri:props.avatarUri};
    }
    //requir("......");
    else {
      this._avatarUri = props.avatarUri;
    }
  }

  render() {
    return (
      <View style={this.props.style}>
        <TImage source={this._avatarUri} style={{width:this._size, height:this._size,
          borderRadius: this._size,borderWidth: 1, borderColor: '#cccccc',
          overflow: 'hidden',}} isMini={true}/>
        {this._renderUnreadNum()}
      </View>
    )
  }

  _renderUnreadNum() {
    if(this.props.unreadNum && this.props.unreadNum > 0) {
      return (
        <View style={{width:SizeUtils.translateDesignNumToCode(30),
            height:SizeUtils.translateDesignNumToCode(30), borderRadius:SizeUtils.translateDesignNumToCode(30),
            backgroundColor:"#db3132", position:"absolute", top:0, right:0, flexDirection:"row",
            alignItems:"center", justifyContent:"center"}}>
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(18), color:"#ffffff", backgroundColor:"#00000000"}}>
              {this.props.unreadNum > 9 ? (MAX_SHOW_NUM + "+") : this.props.unreadNum}
            </Text>
        </View>
      )
    }
  }
}
